<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form :model="queryForm" inline size="mini" class="ele-form-search" @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-form-item label="IMEI:">
          <el-input clearable v-model="queryForm.imei" placeholder="请输入设备IMEI" />
        </el-form-item>
        <el-form-item label="日期:">
          <el-date-picker style="width: 125px" v-model="queryForm.data_time" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="reload">查询
          </el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 数据表格 -->
      <div class="map-box">
        <MapContainer ref="mapcontainer" v-if="searchHandled" :belongTime="queryForm.data_time" :lnglat.sync="lnglat"
          :student_info.sync="student_info" :location_list.sync="location_list" :week_trip.sync="week_trip"
          :day_trip.sync="day_trip" @getLocationInfo="getResLocation" />
      </div>
    </el-card>
  </div>
</template>

<script>
  import MapContainer from "./components/mapcontainer";
  export default {
    name: "DeviceLocation",
    components: {
      MapContainer,
    },
    data() {
      return {
        // 加载状态
        loading: false,
        // 数据接口
        data: [],
        // 搜索条件
        queryForm: {
          imei: "",
          data_time: "",
        },
        searchHandled: false,
        student_info: {},
        location_list: [],
        day_trip: {},
        week_trip: {},
        lnglat: [],
      };
    },
    methods: {
      /* 查询数据 */
      reload() {
        this.searchHandled = true;
        // if (this.queryForm.imei && this.queryForm.imei != "")
        // this.$refs.mapcontainer.getLocationInfo(this.queryForm);
        this.getLocation();
      },

      /* 重置搜索 */
      reset() {
        this.queryForm = {
          imei: "",
          data_time: "",
        };
        this.searchHandled = false;
        this.getLocation();
        // this.reload();
      },
      getResLocation() {
        this.$http
          .get("/student/sendCommand", {
            params: {
              imei: this.rowData.imei
            }
          })
          .then(res => {
            this.$message.success(res.data.msg);
          })
          .catch(e => {
            this.$message.error(e.message);
          });
      },
      getLocation() {
        this.lnglat = [];
        console.log(this.queryForm);
        const query = this.queryForm;
        if (this.queryForm.imei && this.queryForm.imei != "") {
          this.$http
            .get("/student/getLocation", {
              params: {
                ...query
              }
            })
            .then((res) => {
              // console.log("res.data.data",res.data.data)
              this.student_info =
                res.data.data.student_info === null ?
                {} :
                res.data.data.student_info;
              this.location_list = res.data.data.location_list;
              this.day_trip =
                res.data.data.day_trip === null ? {} : res.data.data.day_trip;
              this.week_trip = res.data.data.week_trip;
              this.location_list.length > 0 &&
                this.location_list.map((item) => {
                  this.lnglat.push({
                    lng: item.lng,
                    lat: item.lat
                  });
                });
              this.mapShow = true;
            })
            .catch((e) => {
              this.$message.error(e.message);
            });
        }
      },
    },
  };
</script>

<style scoped>
  .map-box {
    width: 100%;
    height: calc(100vh - 212px);
  }
</style>
